<template>
	<view class="box">
		<view>
			<drawer :show="isDrawerOpen" @close="closeDrawer"></drawer>
		</view>
		<view>
			<languageMask :show="isOpenMask" @close="closeMask" @languageChanged="refreshLanguage"></languageMask>
		</view>
		<view class="head">
			<view style="display: flex;align-items: center;">
				<image src="../../static/qukuailian2_slices/danlieliebiao.png" class="list" @click="openDrawer"></image>
				<image src="../../static/caifubeifen_slices/lujing9.png" mode="" class="back" @click="toBack"></image>
			</view>
			<view class="head-title">
				<view class="vtitle">{{$data.$language.bvtitle}}</view>
			</view>
			<view class="right-head">
				<image src="../../static/qianbaobeifen2_slices/diqiugenghuan.png" mode="" class="language" @click="openMask"></image>
			</view>
		</view>
		<view class="nodePackage">
			<view class="nodeTitle">
				{{$data.$language.nodeTitle}}
			</view>
			<view class="menu">
				<view class="left tab"  v-for="item in getFilteredData(2)" :key="item.id" :class="{ 'active': selectedTab == 'leftNode'}" @click="selectTab('leftNode',item.id)">
					<view class="bigNode">
						{{$data.$language.bigNode}}
					</view>
					<view class="number">
						<text class="number1">{{item.usdt}}</text>
						<text class="number2">USDT</text>
					</view>
					<view   class="buy text-wrapper_2" v-if="selectedTab == 'rightNode'&&langImg">{{$data.$language.purchase}}</view>
					<view  class="buy " v-if="selectedTab == 'leftNode' && langImg">{{$data.$language.purchase}}</view>
					<view   class="buy text-wrapper_2" v-if="selectedTab == 'rightNode'&& (!langImg)">{{$data.$language.purchase}}</view>
					<view  class="buy " v-if="selectedTab == 'leftNode'&& (!langImg)">{{$data.$language.purchase}}</view>
				</view>

				<view class="right tab" v-for="item in getFilteredData(1)" :key="item.id" :class="{ 'active': selectedTab == 'rightNode'}" @click="selectTab('rightNode',item.id)">
					<view class="bigNode">
						{{$data.$language.smallNode}}
					</view>
					<view class="number">
						<text class="number1">{{item.usdt}}</text>
						<text class="number2">USDT</text>
					</view>
					<view class="buy text-wrapper_2" v-if="selectedTab == 'leftNode'&&langImg">{{$data.$language.purchase}}</view>
					<view class="buy" v-if="selectedTab == 'rightNode'&& (langImg)">{{$data.$language.purchase}}</view>
					<view class="buy text-wrapper_2" v-if="selectedTab == 'leftNode'&& (!langImg)">{{$data.$language.purchase}}</view>
					<view  class="buy" v-if="selectedTab == 'rightNode'&& (!langImg)">{{$data.$language.purchase}}</view>
				</view>
			</view>
		</view>
		<!-- 节点权益 -->
		<view class="rights">
			<view class="test1">
				{{$data.$language.btest1}}
			</view>
			<view class="stars1" v-for="item in getFilteredData(1)" :key="item.id">
				<image src="../../static/jiedianbeifen_slices/xingxing.png" mode="" class="star"></image>
				<view class="test2">{{$data.$language.btest2}}{{Math.round(item.bonus)}}%</view>
			</view>

			<view class="stars1" v-for="item in getFilteredData(1)" :key="item.id">
				<image src="../../static/jiedianbeifen_slices/xingxing.png" mode="" class="star"></image>
				<view class="test2">{{$data.$language.btest3}}</view>
			</view>

			<view class="stars1">
				<image src="../../static/jiedianbeifen_slices/xingxing.png" mode="" class="star"></image>
				<view class="test2" v-for="item in getFilteredData(1)" :key="item.id" v-if="selectedTab == 'rightNode'">{{$data.$language.btestmox1}}</view>
				<view class="test2" v-for="item in getFilteredData(2)" :key="item.id" v-if="selectedTab == 'leftNode'">{{$data.$language.btestmox2}}</view>
			</view>
		</view>
		<view class="monbtncer" v-if="bntshuminbtn">
			
		</view>
		<view class="monboxndmrj" v-if="bntshuminbtn">
			<view class="viewtitle">
				{{$data.$language.Passwordinput}}
			</view>
			<input type="password" :placeholder="$data.$language.Passwordinput" v-model="password" :maxlength='6'>
			<view class="btnmaninds">
				<view class="aatione" @click="cancellationbtn()">
					{{$data.$language.cancellation}}
				</view>
				<view class="" @click="quBtns">
					{{$data.$language.qbtn}}
				</view>
			</view>
		</view>
		<view class="btn" @click="getPayBtn">
			{{$data.$language.qbtn}}
		</view>
	</view>
</template>

<script>
	import drawer from "../../my-components/drawer/drawer.vue"
	import languageMask from "../../my-components/languageMask/languageMask.vue"
	import { getPayNode, getPayNodeBtn , getMYsix } from '@/api/index.js';
	import zhCN from '@/locales/zh-CN.js'
	import enUS from '@/locales/en-US.js'
	import trCN from '@/locales/tr-CN.js'
	
	export default {
		data() {
			return {
				selectedTab: 'rightNode',
				langImg:uni.getStorageSync('locale')=='tr-CN',
				// selectImg:
				isDrawerOpen: false,
				isOpenMask: false,
				data:[],
				// $language:uni.getStorageSync('locale')=='en-US'? enUS:zhCN,
				itemId:'1',
				maxData:{},
				bntshuminbtn:false,
				password:'',
			}
		},
		onLoad() {
			var translate = uni.getStorageSync('locale')
			if(translate=='en-US'){
				this.$data.$language = enUS
			}else if(translate=='zh-CN'){
				this.$data.$language = zhCN
			}else{
				this.$data.$language = trCN
			}
			this.loadData()
			this.loagistxs()
		},
		methods: {
			cancellationbtn(){
				this.bntshuminbtn = false
			},
			quBtns(){
				this.bntshuminbtn = false
				getPayNodeBtn({
					node:this.itemId,
					password:this.password,
				},
				    (data) => {
				      // 处理成功返回的数据
					this.data = data
					var Successfullypur = this.$data.$language.Successfullypur
					uni.showToast({
						title:Successfullypur,
						icon:'none',
						duration:2000
					})
					setTimeout(function() {
						uni.navigateBack({
							delta:1
						})
					}.bind(this), 2000)
					// this.max = data.max
					// this.user_group_id = data.user_group_id
					// this.give_wone = data.give_wone
					// this.name = data.name
					// this.bonus = data.bonus
					// this.usdt = data.usdt
					// console.log(dataList);
				    },
				    (errorMsg) => {
				      // 处理请求失败或错误的情况
				      console.error(errorMsg);
				    }
				);
			},
			selectTab(tab,id) {
				if(this.maxData.node_id==0 || this.maxData.node_id==null){
					this.selectedTab = tab;
					this.itemId = id
				}
			      
			},
			refreshLanguage(locale) {
			      if (locale === 'zh-CN') {
			        this.$language = zhCN
			      } else if (locale === 'en-US') {
			        this.$language = enUS
			      }else{
					  this.$language = trCN
				  }
				  uni.reLaunch({
				    url: '/pages/buyNodes/buyNodes' // 当前页面的lujing
				  });
				  
			},
			 getFilteredData(id) {
			      // 过滤出与指定id匹配的数据项
			      return this.data.filter(item => item.id === id);
			    },
			toBack() {
				uni.navigateBack()
			},
			openDrawer() {
				this.isDrawerOpen = true
			},
			closeDrawer() {
				this.isDrawerOpen = false
			},
			openMask() {
				this.isOpenMask = true
			},
			closeMask() {
				this.isOpenMask = false; // 遮罩层guanbi事件处理
			},
			loadData() {
			    getPayNode(
			        (data) => {
			          // 处理成功返回的数据
					this.data = data
					// this.itemId = data[0].id
					// this.max = data.max
					// this.user_group_id = data.user_group_id
					// this.give_wone = data.give_wone
					// this.name = data.name
					// this.bonus = data.bonus
					// this.usdt = data.usdt
					// console.log(dataList);
			        },
			        (errorMsg) => {
			          // 处理请求失败或错误的情况
			          console.error(errorMsg);
			        }
			    );
			},
			// 获取自己资料
			loagistxs(){
				getMYsix((data) => {
				     console.log(data.data)
					 this.maxData = data.data
					 // this.maxData.node_id = 1
					 if(data.data.node_id==0){
						 this.selectedTab = 'rightNode'
						 this.itemId = '1'
					 }else if(data.data.node_id==1){
						 this.selectedTab = 'leftNode'
						 this.itemId = '2'
					 }else if(data.data.node_id==2){
						this.selectedTab = 'leftNode'
						this.itemId = '2'
					 }
				    },
				    (errorMsg) => {
				      // 处理请求失败或错误的情况
				      console.error(errorMsg);
				    }
				);
			},
			getPayBtn(){
				var hasednode = this.$data.$language.hasednode
				if(this.maxData.node_id==1 && this.itemId=='1'){
					uni.showToast({
						title:hasednode,
						icon:'none',
						duration:2000
					})
					return
				}else if(this.maxData.node_id==2){
					uni.showToast({
						title:hasednode,
						icon:'none',
						duration:2000
					})
					return
				}else{
					this.bntshuminbtn = true
				}
				
				// getPayNodeBtn({
				// 	node:this.itemId
				// }).then(res => {
				// 	console.log(res,'data');
				// })
			}
		},
		components: {
			drawer,
			languageMask
		}
	}
</script>

<style lang="less">
	.box{
		background-color: #fff;
	}
	
	.head {
		padding: 40rpx;
	}
.monbtncer{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0, .4);
		z-index: 999;
	}
.monboxndmrj{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 9999;
		width: 600rpx;
		height: 400rpx;
		background-color: #fff;
		border-radius: 14rpx;
		.viewtitle{
			width: 100%;
			font-size: 34rpx;
			height: 120rpx;
			text-align: center;
			line-height: 120rpx;
			color: #000000;
		}
		input{
			width: 80%;
			height: 80rpx;
			border: 1rpx solid #e9e9e9;
			padding: 0 24rpx;
			box-sizing: border-box;
			border-radius: 14rpx;
			display: block;
			margin: auto;
		}
		.btnmaninds{
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-around;
			margin-top: 60rpx;
			view{
				width: 200rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 30rpx;
				background: #0762FF;
				border-radius: 6px;
				color: #fff;
			}
			.aatione{
				background-color: #e9e9e9;
				color: #000000;
			}
		}
	}
	.box {
		width: 750rpx;
	}

	.title {
		width: 164rpx;
		height: 48rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 48rpx;
		margin-left: 160rpx;
	}
	.language {
		width: 44rpx;
		height: 44rpx;
		object-fit: contain;
		box-shadow: unset;
		margin-top: unset;
		border-radius: unset;
	
	}

	.nodePackage {
		height: 356rpx;
		width: 750rpx;
		margin-top: 46rpx;
	}

	.nodePackage .nodeTitle {
		width: 282rpx;
		height: 40rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2C2C2C;
		line-height: 44rpx;
		margin-left: 24rpx;
	}

	.menu {
		height: 298rpx;
		margin-top: 18rpx;
		display: flex;
	}

	/* 大节点 */
	/* .menu .left {
		width: 338rpx;
		height: 298rpx;
		background: #F4F6FA;
		border-radius: 16rpx;
		margin-left: 24rpx;
		overflow: hidden;
	} */

	.menu .left .bigNode {
		width: 282rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2C2C2C;
		line-height: 44rpx;
		margin-top: 46rpx;
		margin-left: 28rpx;
		text-align: center;
	}

	.menu .left .number {
		width: 238rpx;
		height: 54rpx;
		margin-top: 16rpx;
		margin-left: 52rpx;
		text-align: center;
	}

	.number .number1 {
		width: 238rpx;
		height: 54rpx;
		font-size: 48rpx;
		font-family: Arial-BoldMT;
		font-weight: BoldMT;
		color: #0762FF;
		line-height: 56rpx;
	}

	.number .number2 {
		width: 238rpx;
		height: 54rpx;
		font-size: 28rpx;
		font-family: Arial;
		color: #0762FF;
		line-height: 56rpx;
	}

	.left .buy {
		width: 120rpx;
		height: 64rpx;
		text-align: center;
		color: rgba(255, 255, 255, 1);
		line-height: 64rpx;
		margin: 34rpx 0 0 108rpx;
		background-color: rgba(7, 98, 255, 1);
		border-radius: 14rpx;
	}
	.left .text-wrapper_2 {
	  background-color: rgba(142, 183, 255, 1);
	}

	/* 小节点 */
	.menu .tab {
		width: 338rpx;
		height: 298rpx;
		background: #F4F6FA;
		border-radius: 16rpx;
		margin-left: 24rpx;
		overflow: hidden;
		/* border: 2rpx solid #0762FF; */
	}
	.active{
		border: 2rpx solid #0762FF;
	}

	.menu .right .bigNode {
		width: 282rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2C2C2C;
		line-height: 44rpx;
		margin-top: 46rpx;
		margin-left: 28rpx;
		text-align: center;
	}

	.menu .right .number {
		width: 238rpx;
		height: 54rpx;
		margin-top: 16rpx;
		margin-left: 52rpx;
		text-align: center;
	}

	.right .number .number1 {
		width: 238rpx;
		height: 54rpx;
		font-size: 48rpx;
		font-family: Arial-BoldMT;
		font-weight: BoldMT;
		color: #0762FF;
		line-height: 56rpx;
	}

	.right .number .number2 {
		width: 238rpx;
		height: 54rpx;
		font-size: 28rpx;
		font-family: Arial;
		color: #0762FF;
		line-height: 56rpx;
	}

	.right .buy {
		width: 120rpx;
		height: 64rpx;
		text-align: center;
		color: rgba(255, 255, 255, 1);
		line-height: 64rpx;
		margin: 34rpx 0 0 108rpx;
		border-radius: 14rpx;
		background-color: rgba(7, 98, 255, 1);
	}
	.right .text-wrapper_2 {
	  background-color: rgba(142, 183, 255, 1);
	}

	.rights {
		width: 702rpx;
		height: 288rpx;
		margin: 24rpx 0 0 24rpx;
		background-image: url(../../static/jiedianbeifen_slices/bianzu 3beifen 3.png);
		background-repeat: no-repeat;
		background-size: cover;
		overflow: hidden;
	}

	.rights .test1 {
		width: 358rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #0762FF;
		line-height: 50rpx;
		margin: 46rpx 0 0 32rpx;
	}

	.stars1 {
		display: flex;
	}

	.star {
		width: 24rpx;
		height: 24rpx;
		margin: 18rpx 0 0 32rpx;
	}

	.stars1 .test2 {
		width: 604rpx;
		/* height: 34rpx; */
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #2C2C2C;
		line-height: 34rpx;
		margin: 14rpx 0 0 8rpx;
	}

	.btn {
		width: 702rpx;
		height: 80rpx;
		background: #0762FF;
		border-radius: 12rpx;
		margin-left: 24rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>